<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 100%;
            height: 54px;
            background-color: #292929;
        }

        nav {
            width: 1200px;
            height: 54px;
            margin: 0 auto;
            display: flex;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left {

            height: 100%;
        }

        .left li {
            float: left;
            margin-left: 50px;
            position: relative;
        }

        .right {

            height: 100%;
            margin-left: 200px;
        }

        .right li {
            float: left;
            margin-left: 60px;
        }

        a {
            text-decoration: none;
            display: block;
            font-size: 14px;
            height: 54px;
            line-height: 54px;
            color: #c7c7c7;
        }

        .huang {
            color: #cba45c
        }

        .right i {
            width: 21px;
            height: 17px;
            background-image: url('1.png');
            background-repeat: no-repeat;
            background-position: 0px 0px;
            display: inline-block;
            position: absolute;
            margin-left: -23px;
            margin-top: 17px;
        }

        .right .i1 {
            width: 21px;
            height: 17px;
            background-image: url('1.png');
            background-repeat: no-repeat;
            background-position: 0px -28px;
            display: inline-block;
             position: absolute; 
            top: 4px;
        }

        .left li a:hover {
            color: #cba45c;
        }

        .dapian .liang1 {
            width: 95px;
            height: 130px;
            /* border: 1px solid; */
            /* position: absolute; */
            top: 0;
            margin-left: 10px;

            /* display: none;  */
            z-index: 100;
        }

        .liang2 {
            width: 95px;
            height: 130px;
            position: absolute;
            border: 1px solid;
            margin-left: 70px;
        }



        .haiwai p:nth-child(1) {
            text-align: center;
            margin: 0;
            padding-top: 10px;
            color: #c7c7c7;
        }

        .haiwai p:nth-child(2) {
            text-align: center;
            margin: 0;
            padding-top: 10px;
            color: white;
        }

        .huay {
            width: 95px;
            height: 54px;
            /* border:1px solid red; */
            background-color: rgba(41, 41, 41, .95);
            opacity: 0.8;
        }

        .haiwai {
            width: 95px;
            height: 76px;
            /* display: none; */
            /* border:1px solid red; */
            background-color: rgba(41, 41, 41, .95);
            opacity: 0.8;
            display: none;
        }

        .liang1:hover .haiwai {
            display: block;
        }

        .haiwai p:hover {
            background-color: #e8c98a;
            opacity: 0.9;
            margin: 0 auto;
        }
       #juqing{
           margin-left: 15px;
       }
       .chang{
           width: 90px;
           height: 180px;
           /* border:1px solid; */
           margin-left: -30px;
       }
       .chang:hover .chang1{
           display: block;
       }
       .daxiao{
           width: 90px;
           height: 54px;
            background-color: rgba(41, 41, 41, .95);
            opacity: 0.8;
            margin-left: 30px;
       }
       .chang1{
            width: 90px;
            height: 100%;
            background-color: rgba(41, 41, 41, .95);
            opacity: 0.8;
            /* margin-top: -20px; */
            display: none;
            margin-left: 30px;
       }
       .chang1 p{
           /* text-align: center; */
            margin: 0;
            padding-top: 20px;
            color: #c7c7c7; 
            padding-left: 10px;
       }
       .chang1 p:hover{
           background-color: #e8c98a;
            opacity: 0.9;
            /* margin: 0 auto; */
       }
      
    </style>
</head>

<body>
    <div class="container">
        <nav>
            <div class="left">
                <ul>
                    <li>
                        <a href="#" class="huang">会员首页</a>
                    </li>
                    <li class="dapian">

                        <div class="liang1">
                            <div class="huay">
                                <a href="#" class="dian">看电影</a>
                            </div>
                            <div class="haiwai">
                                <p>华语电影</p>
                                <p>海外大片</p>
                            </div>
                        </div>
                    </li>
                    <li id="juqing">
                     <div class="chang">
                        <div class="daxiao">
                              <a href="#">看剧</a>
                        </div>
                      <div class="chang1">
                            <p>英剧</p>
                            <p>美剧</p>
                            <p>港剧</p>
                            <p>韩剧</p>
                      </div>
                     </div>
                   </li> 
                   
                    <li class="jilu">
                        <a href="#">看动漫</a>
                    </li>
                    <li class="jilu">
                        <a href="#">纪录片</a>
                    </li>
                    <li class="jilu">
                        <a href="#">德云社</a>
                    </li>
                    <li class="jilu">
                        <a href="#">看直播</a>
                    </li>

                </ul>

            </div>
            <div class="right">
                <ul>
                    <li>
                        <i></i>
                        <a href="#">我的会员</a>
                    </li>
                    <li>
                        <i class="i1"></i>
                        <a href="#">会员卡</a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
</body>

</html>